<template>
  <div class="app-container">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <Edit :infoid="id" :timestamp="timestamp" :type="usertype" @dialogHide="dialogHide($event)" />
    </el-dialog>

    <div class="filter-container">
      <div style="float:left;">
        <el-radio-group v-model="usertype" style="vertical-align:top" @change="handleFilter">
          <el-radio-button :label="1">公司认证</el-radio-button>
          <el-radio-button :label="2">个人认证</el-radio-button>
        </el-radio-group>
        <el-select v-model="listQuery.status" placeholder="请选择状态" clearable style="margin-left: 10px;width: 200px" class="filter-item" @change="handleFilter">
          <el-option v-for="(it,index) in statusList" :key="index" :label="it.label" :value="it.id" />
        </el-select>
        <el-input v-model="listQuery.companyName" placeholder="请输入关键词" style="width: 200px;margin-left: 10px;" class="filter-item" @change="handleFilter" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
          搜索
        </el-button>
      </div>
      <!-- <el-popconfirm v-if="roleEdit" title="确定批量删除所选信息吗？" style="margin-left:10px;float:right" @onConfirm="deleteData()">
        <el-button slot="reference" type="danger" class="filter-item" icon="el-icon-delete">批量删除</el-button>
      </el-popconfirm> -->
    </div>
    <template>
      <el-table
        v-if="usertype===1"
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->

        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50px"
          :index="indexMethod"
        />

        <el-table-column min-width="200px" prop="companyName" label="公司名称" />
        <el-table-column width="180px" prop="companyAuthSubmitTime" align="center" label="提交时间" />
        <el-table-column width="110px" prop="companyAuthStatus" align="center" label="认证状态">
          <template slot-scope="scope">
            {{ fAuthStatus(scope.row.companyAuthStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-search" @click="detail(scope.row.id)">详情</el-button>
            <!-- <el-popconfirm title="确定删除该信息吗？" style="margin-left:10px;" @onConfirm="deleteData(scope.row.id)">
              <el-button slot="reference" type="danger" size="small" icon="el-icon-delete">删除</el-button>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else-if="usertype===2"
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->

        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50px"
          :index="indexMethod"
        />

        <el-table-column min-width="200px" prop="personName" label="姓名" />
        <el-table-column width="180px" prop="personAuthSubmitTime" align="center" label="提交时间" />
        <el-table-column width="110px" prop="personAuthStatus" align="center" label="认证状态">
          <template slot-scope="scope">
            {{ fAuthStatus(scope.row.personAuthStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-search" @click="detail(scope.row.id)">详情</el-button>
            <!-- <el-popconfirm title="确定删除该信息吗？" style="margin-left:10px;" @onConfirm="deleteData(scope.row.id)">
              <el-button slot="reference" type="danger" size="small" icon="el-icon-delete">删除</el-button>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </template>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Edit from './components/ArticleDetail'

export default {
  name: 'ArticleList',
  components: { Pagination, Edit },
  data() {
    return {
      usertype: 1,
      statusList: [{ id: 0, label: '待支付' }, { id: 1, label: '待审核' }, { id: 2, label: '审核通过' }, { id: 3, label: '未通过' }],
      roleEdit: true,
      selection: false,
      item: {},
      dialogtitle: '',
      dialogVisible: false,
      allDialogVisible: false,
      readOnly: false,
      timestamp: '',
      list: [
      ],
      total: 0,
      listLoading: true,
      listQuery: {
        companyName: '',
        status: 1,
        page: 1,
        limit: 10
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: ''
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    this.getList()
  },
  methods: {
    fAuthStatus(id) {
      if (id) {
        return this.statusList.find(item => item.id === id).label
      }
    },
    indexMethod(index) {
      index = (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit
      return index
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteData(id) {
      this.$http
        .get('/api/ga/removeGa?id=' + id)
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    sortChange(column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = 'asc'
      } else {
        this.Isace = 'desc'
      }
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    detail(id, type) {
      this.id = id
      this.dialogtitle = '查看'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    dialogHide(flag) {
      this.dialogVisible = false
      this.getList()
    },
    getList() {
      const para = {
        companyName: this.listQuery.companyName,
        companyAuthStatus: this.listQuery.status,
        personName: this.listQuery.companyName,
        personAuthStatus: this.listQuery.status,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      let url = 'queryCompanyAuthByPage'
      if (this.usertype === 2) { url = 'queryPersonAuthByPage' }
      this.listLoading = true
      this.$http
        .post('/api/busWxUser/' + url, para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.records
            this.total = response.data.result.total

            localStorage.removeItem('para')
            localStorage.setItem('para', JSON.stringify(para))
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
